<template>
    <h1>示例页面</h1>
    <div v-for="(item) in steps" :key="item">
        <div>{{item.idx}}</div>
        <div>{{item.desc}}</div>
    </div>
</template>
<script>

export default {
    data(){
        return{
            steps:[
                {idx:"第1步",desc:"导航被触发，可以通过router-link组件触发，也可以通过$router.push或直接改变URL触发"},
                {idx:"第2步",desc:"在将要失活的组件中调用beforeRouteLeave守卫函数"},
                {idx:"第3步",desc:"调用全局主册的beforeEach守卫"},
                {idx:"第4步",desc:"如果当前组件有变化，调用组件内的BeforeRouteUpdate守卫"},
                {idx:"第5步",desc:"调用在定义路由时配置上的BeforeEnter守卫函数"},
                {idx:"第6步",desc:"解析异步路由事件"},
                {idx:"第7步",desc:"在被激活的组件中调用beforeRouteEnter守卫"},
                {idx:"第8步",desc:"导航被确认"},
                {idx:"第9步",desc:"调用全局注册的afterEach守卫"},
                {idx:"第10步",desc:"鉵发DOM更新，页面进行更新"},
                {idx:"第11步",desc:"调用组件的BeforeRouteEnter函数中的next注册的回调函数"}
            ]
        }
    },
    beforeRouteEnter(to,from,next){
        console.log(to,from,"前置守卫")
        /***
         * 组件未创建，不能用 this
         */
        next((w)=>{
            console.log(w)
        })
        return true
    },
    beforeRouteUpdate(to, from){
        console.log(to,from,"路由参数更新")
    },
    beforeRouteLeave(to,from){
        console.log(to,from,"离开页面")
    }
}
</script>